<template>
	<view class="d_page">
		<view class="top">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/31.png" mode="" @click="returnPage"></image>
			<text class="title">{{ fname }}</text>
		</view>
		<view class="classify_box">
			<view :class="syIndex == 0 ? 'indexs' : 'actives'" @click="bindIndex()">首页</view>
			<view class="fl_item">
				<view class="" v-for="(item, index) in classify" :key="index" :class="currenIndex == index ? 'status_active' : 'fl_items'" @click="bindCindex(index,item)">
					<view class="title">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<view class="" v-if="syIndex==0">
			<view class="swiper_box">
				<swiper class="swipers" autoplay interval="3000" duration="1000" circular>
					<swiper-item v-for="(item, index) in shopList.images1" :key="index"><image :src="Config_ysy.cosurl +item" mode="scaleToFill"></image></swiper-item>
				</swiper>
			</view>
			<view class="shop_list">
				<view class="shop_head">
					<view class="shop_item">
						<view class="left">
							<view class="left_img">
								<image :src="Config_ysy.cosurl +shopList.image" mode=""></image>
							</view>
							<view class="left_con">
								<view class="name">{{ shopList.name }}</view>
								<view class="tuijie">
									<sx-rate
										class="sx-rate"
										disabled
										:default-color="color.default"
										:max="maxNum"
										:active-color="color.active"
										:value="Number(shopList.star)"
										fontSize="24upx"
									/>
									<text >{{ shopList.fnum }}人收藏</text>
								</view>
							</view>
						</view>
						<view class="right">
							<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/xczx/30.png" v-if="shopList.isf=='false'" mode="" @click="bindSc()"></image>
							<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/xczx/31.png" v-if="shopList.isf=='true'"  mode="" @click="bindScs()"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="like_box">
				<view class="imgs">
				    <image class="images" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/xczx/like.png" mode=""></image>	
				</view>
				<view class="like_list">
					<view class="like_item" v-for="(item,index) in likeList" :key="index" @click="bindGoodsShop(item.id)">
						<view class="tops">
						     <image :src="item.image" mode="" class="tops_img"></image>	
						</view>
						<view class="goods_title">{{item.title}}</view>
						<view class="goods_price">
							<view class="price">￥{{item.price}}</view>
							<view class="old_price">￥{{item.original_price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fl_box" v-else>
			<view class="like_list">
				<view class="like_item" v-for="(item,index) in likeLists" :key="index" @click="bindGoodsShop(item.id)">
					<view class="tops">
					     <image :src="item.image" mode="" class="tops_img"></image>	
					</view>
					<view class="goods_title">{{item.title}}</view>
					<view class="goods_price">
						<view class="price">￥{{item.price}}</view>
						<view class="old_price">￥{{item.original_price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import SxRate from '@/components/sx-rate';
export default {
	components:{
		SxRate,
	},
	data() {
		return {
			fname: '',
			token: '',
			shop_id: 907,
			user_id:null,
			classify: [],
			syIndex: 0,
			currenIndex: -1,
			maxNum: 5,
			color: {
				default: '#ccc',
				active: '#F40C0C'
			},
			swiper:[],
			shopList:{},
		    likeList:[],
			likeLists:[]
		};
	},
	onLoad(option) {
		this.fname = option.name;
		this.token = option.token;
		this.shop_id=option.shop_id
		this.getFlData()
		this.getData()
		this.bindLike()
	},
	methods: {
		returnPage() {
			uni.navigateBack({
				delta: 1
			});
		},
		bindIndex() {
			(this.currenIndex = -1), (this.syIndex = 0);
		},
		bindSc(){
			var url = '/api/usercenter/user';
			let params = {
				token:this.token,
			};
			this.Unfold_data.upload_datas(params, 'POST', url, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
					this.user_id = res.data.data.id;
					let url='/api/goods/goods/shop_favoriteedit'
					let params={
						token:this.token,
						shop_id:this.shop_id,
						uaer_id:this.user_id,
					}
					this.Unfold_data.yh_data(params, 'POST', url, res => {
						if(res.data.code==1){
							this.getData()
							this.Unfold_data.showWindow('收藏成功');
						}else{
							this.Unfold_data.showWindow('已取消');
						}
					})
				 }
				})	
		},
		bindScs(){
			var url = '/api/usercenter/user';
			let params = {
				token:this.token,
			};
			this.Unfold_data.upload_datas(params, 'POST', url, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
					this.user_id = res.data.data.id;
					let url='/api/goods/goods/shop_favoriteedit'
					let params={
						token:this.token,
						shop_id:this.shop_id,
						uaer_id:this.user_id,
					}
					this.Unfold_data.yh_data(params, 'POST', url, res => {
						if(res.data.code==1){
							this.getData()
							this.Unfold_data.showWindow('已取消');
						}else{
							this.Unfold_data.showWindow(res.data.msg);
						}
					})
				 }
				})	
		},
		bindLike(){
			let url='/api/goods/goods/shop_goodss_list';
			let params={
				token:this.token,
				shop_id:this.shop_id,
			}
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if(res.data.code==1){
					this.likeList=res.data.data
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			})
		},
		bindCindex(index,item) {
			this.currenIndex = index 
			this.syIndex = -1
			let url='/api/goods/shopcategory/category_goods';
			let params={
				token:this.token,
				shop_id:this.shop_id,
				scid:item.id
			}
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if(res.data.code==1){
					this.likeLists=res.data.data
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			})
		},
		getData(){
			var url = '/api/usercenter/user';
			let params = {
				token:this.token,
			};
			this.Unfold_data.upload_datas(params, 'POST', url, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
					this.user_id = res.data.data.id;
					let url="/api/goods/goods/service_details"
					let params={
						token:this.token,
						shop_id:this.shop_id,
						uaer_id:this.user_id,
					}
					this.Unfold_data.yh_data(params, 'POST', url, res => {
						if(res.data.code==1){
							this.shopList=res.data.data
						}
					})
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		getFlData(){
			let url='/api/goods/shopcategory/lists';
			let params={
				token:this.token,
				shop_id:this.shop_id,
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if(res.data.code==1){
					this.classify=res.data.data
				}else{
					this.Unfold_data.showWindow(res.data.msg);
				}
			})
		},
		bindGoodsShop(id){
		 	uni.navigateTo({
		 		url:'../goods_detail/goods_detail?id='+id+'&shop_id='+this.ids+'&token='+this.token
		 	})
		 },
	}
};
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
.d_page {
	.top {
		width: 750upx;
		height: 180upx;
		background: url(https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/new_bjs.png) no-repeat;
		background-size: 750upx 180upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 60upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.title {
			font-size: 30upx;
			color: #ffffff;
			margin-left: 30upx;
		}

		image {
			width: 24upx;
			height: 40upx;
			margin-left: 20upx;
		}
	}
	.classify_box {
		width: 730upx;
		margin: 200upx auto 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.indexs {
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #f02f2a;
			z-index: 1;
		}
		.actives {
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #969696;
			z-index: 1;
		}
		.fl_item ::-webkit-scrollbar {
			display: none;
		}
		.fl_item {
			width: 640upx;
			height: 100upx;
			margin-left: 20upx;
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.status_active {

				.title {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 600;
					color: #f02f2a;
					margin-right: 20upx;
				}
			}
			.fl_items {
				.title {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #969696;
					margin-right: 20upx;
				}
			}
		}
	}
	.swiper_box{
		margin-top: 30upx;
		width: 720upx;
		margin: 0 auto;
		.swipers {
			height: 260upx;
			image {
				width: 710upx;
				height: 300upx;
			}
		}
	}
	.shop_list {
		width: 750upx;
		margin-top: 60upx;
		.shop_head {
			width: 750upx;
			.shop_item {
				width: 690upx;
				margin: 0 auto 30upx;
				padding: 15upx;
				background: #ffffff;
				border-radius: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.left_img {
						image {
							width: 80upx;
							height: 82upx;
							border-radius: 15upx;
						}
					}
					.left_con {
						margin-left: 20upx;
						.name {
							font-size: 30upx;
							font-weight: bold;
							color: #323230;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 290upx;
						}
						.tuijie {
							margin-top: 20upx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							text {
								margin-left: 25upx;
								font-weight: 400;
								color: #767574;
								font-size: 20upx;
							}
						}
					}
				}
				.right {
					image{
						width: 64upx;
						height: 64upx;
					}
				}
			}
		}
	}
	.like_box{
		margin-top: 80upx;
		.imgs{
			display: flex;
			justify-content: center;
			align-items: center;
			.images{
				width: 284upx;
				height: 33upx;
			}
		}
		.like_list{
			width: 720upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30upx auto 0;
			flex-wrap: wrap;
			.like_item{
				width: 48%;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 10upx;
				padding-bottom: 30upx;
				.tops{
					width: 100%;
					.tops_img{
						width: 100%;
						height: 360upx;
						border-radius: 10upx 10upx 0 0;
					}
				}
				.goods_title{
					margin: 20upx auto 0;
					width: 293upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #242424;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.goods_price{
					margin: 20upx auto 0;
					width: 293upx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.price{
						font-size: 33upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #E42B16;
					}
					.old_price{
						font-size: 24upx;
						font-weight: 300;
						color: #999999;
						margin-left: 20upx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
	.fl_box{
		.like_list{
			width: 720upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30upx auto 0;
			flex-wrap: wrap;
			.like_item{
				width: 48%;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 10upx;
				padding-bottom: 30upx;
				.tops{
					width: 100%;
					.tops_img{
						width: 100%;
						height: 360upx;
						border-radius: 10upx 10upx 0 0;
					}
				}
				.goods_title{
					margin: 20upx auto 0;
					width: 293upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #242424;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.goods_price{
					margin: 20upx auto 0;
					width: 293upx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.price{
						font-size: 33upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #E42B16;
					}
					.old_price{
						font-size: 24upx;
						font-weight: 300;
						color: #999999;
						margin-left: 20upx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
}
</style>
